<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js - 基础</title>
</head>
<body>
    <div id="app">
        共点击:{{num}} 次
        <hr>
        <btn></btn>
    </div> 

    <!-- 引入vue框架 开发版 :包含警告 和调试信息 -->
    <script src="../lib/vue.js"></script>
    <script>
        /**
            Vue实例对象上的属性和方法:
                一般会有以_ 开头(vue内置一些属性,无需对外操作,只是内部使用的属性)
                , 以$开头 的属性和方法确实就是可以提供操作

                方法:
                    事件:
                        $on()
                        $emit()
                        $once()
                        $off()
                    
                    生命周期方法:
                        $mount()  手动挂载
                        $destory() 手动销毁实例
                        $forceUpdate() 强制更新DOM 
                        $nextTick()  在下一次DOM更新后调用

                    数据:
                        $watch() 监听器    
                        $set() 解决操作数据无法触发更新时使用


                属性:
                    $data : 就是实例option中的data数据
                    $props : 父组件传递的参数对象
                    $el : Vue 实例使用的根 DOM 元素。
                    $opions Vue实例化时的配置参数

                    $parent : 返回当前实例的父实例对象(如果是根实例就是undefined)
                    $root :当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。
                    $children : 返回当前实例对象的子组件 (数组)

                    2.4+ 新增    
                    $attrs
                    $listeners

        */
        Vue.component('btn' , {
            template:`<button @click="add">按钮 - {{$parent.num}}</button>`,
            methods:{
                add(){
                    this.$parent.num++;
                    console.log(this.$parent === vm)
                    console.log(this.$root === vm)
                    console.log(this.$root.$children[0] === this)
                }
            }
        })

        //vm 就是根组件
        let vm = new Vue({
            el:"#app",//指定Vue挂载的DOM
            data:{//当前vue实例中使用的数据
                num:0
            },
            methods:{//当前Vue实例中使用到的方法
               
            }
        })

        // vm.$watch()
    </script>
</body>
</html>